<template>
  <view>
		<view class="title">
			<view>名次</view>
			<view>姓名</view>
			<view>积分</view>
			<view>等级</view>
		</view>
    <scroll-view scroll-y @scrolltolower="loadMore" @refresherrefresh="refresh" class="scroll-view">
      <view v-for="(item, index) in memberIntegralList" :key="item.memberId" class="list-item">
				<view>{{item.order}}</view>
				<view>{{item.memberName}}</view>
				<view>{{item.integralTotal}}</view>
				<view>{{ getItemInfo(item) }}</view>
      </view>
      <view v-if="loading" class="loading-tip">加载中...</view>
      <view v-if="noMoreData" class="no-more-data-tip">已经到底了</view>
    </scroll-view>
  </view>
</template>

<script>
	import { sortMemberintegral } from "@/api/puyu/memberintegral";
	export default {
		data() {
			return {
				memberIntegralList: [], // 数据列表
				total: null, // 总数据条数（从服务器获取）
				loading: false, // 是否正在加载数据
				noMoreData: false, // 是否已经没有更多数据可以加载
				// 查询参数
				queryParams: {
					pageNum: 1, // 当前页码
					pageSize: 15, // 每页显示的数据条数
					delFlag: '0',
					memberName: null,
					phone: null,
				},
			};
		},
		onShow() {
			// 页面显示时加载第一页数据
			this.loadMore();
		},
		methods: {
			async loadMore() {
				if (this.loading || this.noMoreData) return;
				this.loading = true;
				this.queryParams.orderByColumn = 'integralTotal'; //查询字段是表格中字段名字
				this.queryParams.isAsc = 'descending'; //动态取值排序顺序
				sortMemberintegral(this.queryParams).then(response => {
					let order = this.memberIntegralList.length;
					for (var i = 0; i < response.rows.length; i++) {
						order += 1;
						let item = response.rows[i];
						item.order = order;
						this.memberIntegralList.push(item);
					}
					// this.memberIntegralList = [...this.memberIntegralList, ...response.rows];
					this.total = response.total;
					this.queryParams.pageNum += 1;
					if (this.memberIntegralList.length >= this.total) {
						this.noMoreData = true;
					}
					this.loading = false;
				});
			},
			async refresh() {
				this.queryParams.pageNum = 1;
				this.memberIntegralList = [];
				this.noMoreData = false;
				await this.loadMore(); // 调用加载更多数据的函数来实现刷新
				uni.stopPullDownRefresh(); // 停止下拉刷新动画
			},
			getItemInfo(item) {
				let level = '';
				if (item.integralTotal >= 1000) {
					level = '甲级';
				} else if (item.integralTotal >= 700) {
					level = '乙级';
				} else if (item.integralTotal >= 400) {
					level = '丙级';
				} else {
					level = '初级';
				}
				return level;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.title {
		margin: 15rpx 15rpx 0 15rpx;
		height: 100rpx;
		font-weight: bolder;
		color: white;
		background-color: purple;
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		align-items: center;
	}
	
	.scroll-view {
		height: calc(100vh - 130rpx);
		overflow: hidden;
	}
	.list-item {
		margin: 15rpx;
		// height: 100rpx;
		padding: 15rpx;
		background-color: white;
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		align-items: center;
	}
.loading-tip,
.no-more-data-tip {
  padding: 10px;
  text-align: center;
	color: gray;
}
</style>
